<template>
  <div class="menu-tree">
    <!-- 遍历菜单 -->
    <template v-for="item in menuList" :key="item.id">
      <!-- 含有子菜单 -->
      <template v-if="item.children && item.children.length && item.type < 2">
        <el-sub-menu :index="item.url">
          <template #title>
            <el-icon>
              <Management />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <menu-tree :meuns="item.children"></menu-tree>
        </el-sub-menu>
      </template>
      <!-- 没有子菜单 -->
      <template v-else>
        <el-menu-item :index="item.url">
          <el-icon>
            <Management />
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
export default defineComponent({
  name: "menu-tree",
  props: {
    meuns: Array
  },
  setup(props) {
    const menuList = ref(props.meuns).value
    return {
      menuList
    }
  }
})
</script>
